<template>
  <div ref="refChart" :style="{ height: kHOne * 2 + 'px'}"></div>
</template>

<script>
import theme from '../../assets/theme/theme'

export default {
  name: 'C8',
  inject: ['getMyData'],
  computed: {
    myData() {
      return this.getMyData().chartFive;
    }
  },
  data() {
    return {
      chartInstance: null,
      allData1: [],
      allData2: [],
      allData3: [],
      allData4: [],
      kHOne: null,
      // 自适应浏览器获取宽高大小定时器
      screenTimer: null,
      // 局部刷新定时器
      dataTimer: null,
      // 获取浏览器可视区域高度（包含滚动条）、 window.innerHeight
      // 获取浏览器可视区域高度（不包含工具栏高度）、document.documentElement.clientHeight
      // 获取body的实际高度  (三个都是相同，兼容性不同的浏览器而设置的) document.body.clientHeight
      screenHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      screenWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    }
  },
  beforeMount() {
    this.kHOne = Math.round(this.screenHeight * 0.46)
  },
  mounted() {
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenWidth, false);
    // 自适应浏览器获取宽高大小定时器
    this.resizeScreen();
    // 图表初始化
    this.initChart();
    // 获取接口数据
    // this.getData();
    // 调用Echarts图表自适应方法
    this.screenAdapter();
    // Echarts图表自适应
    window.addEventListener("resize", this.screenAdapter);
    // 局部刷新定时器
    this.getDataTimer();
  },
  beforeDestroy() {
    // 销毁Echarts图表
    this.chartInstance.dispose();
    this.chartInstance = null;
  },
  destroyed() {
    // 清除自适应屏幕定时器
    clearInterval(this.screenTimer);
    this.screenTimer = null;
    // 清除局部刷新定时器
    clearInterval(this.dataTimer);
    this.dataTimer = null;
    // 页面大小改变时触发销毁
    window.removeEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发销毁
    window.removeEventListener('resize', this.getScreenWidth, false);
    // Echarts图表自适应销毁
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 自适应浏览器获取宽高大小定时器
    resizeScreen() {
      this.screenTimer = setInterval(() => {
        this.getScreenHeight();
        this.getScreenWidth();
      }, 200)
    },
    // 获取浏览器高度进行自适应
    getScreenHeight() {
      this.screenHeight = window.innerHeight || document.documentElement.innerHeight || document.body.clientHeight;
      this.kHOne = Math.round(this.screenHeight * 0.46);
    },
    // 字体大小根据宽度自适应
    getScreenWidth() {
      this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    },
    initChart() {
      const myChart = this.$echarts.init(this.$refs.refChart, theme, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      let initOption;
      setTimeout(function () {
        initOption = {
          title: {
            text: '企业信息查询统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            top: '5%',
            data: ['总量', '去年总量', '企业基本信息查询', '企业变更信息查询', '自然人关联信息查询', '企业股东信息查询', '企业税务信息征收查询', '批量基本信息查询', '批量自然人关联信息查询']
          },
          grid: {
            top: '15%',
            left: '3%',
            right: '3%',
            bottom: '1%',
            containLabel: true
          },
          yAxis: [{
            type: 'value',
            name: '次数',
            position: 'left'
          }, {
            show: false
          }],
          xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          },
          series: [{
            name: '总量',
            type: 'line',
            yAxisIndex: 1,
            label: {
              normal: {
                show: true
              }
            },
            symbolSize: 10,
            lineStyle: {
              normal: {
                width: 5,
                shadowColor: 'rgba(0,0,0,0.5)',
                shadowBlur: 10,
                shadowOffsetY: 15,
                color: 'rgb(190, 93, 99)'
              }
            },
            data: [990, 588, 979, 1102, 1088, 1182, 1149, 733, 1085, 842, 899, 1023]
          }, {
            name: '去年总量',
            type: 'line',
            yAxisIndex: 1,
            label: {
              normal: {
                show: true
              }
            },
            symbolSize: 10,
            lineStyle: {
              normal: {
                width: 5,
                shadowColor: 'rgba(0,0,0,0.5)',
                shadowBlur: 10,
                shadowOffsetY: 15,
                color: 'rgb(153, 214, 48)'
              }
            },
            data: [993, 733, 1085, 842, 899, 1023, 947, 909, 945, 812, 1002, 980]
          }, {
            name: '企业基本信息查询',
            type: 'bar',
            stack: '次数',
            label: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(249,18,243)'
              }
            },
            data: [197, 134, 138, 167, 160, 174, 164, 733, 1085, 842, 899, 1023]
          }, {
            name: '企业变更信息查询',
            type: 'bar',
            stack: '次数',
            label: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(249,205,30)'
              }
            },
            data: [325, 191, 315, 400, 407, 448, 417, 197, 134, 138, 167, 160]
          }, {
            name: '自然人关联信息查询',
            type: 'bar',
            stack: '次数',
            label: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(0, 137, 239)'
              }
            },
            data: [138, 111, 156, 139, 116, 151, 154, 325, 191, 315, 400, 407]
          }, {
            name: '企业股东信息查询',
            type: 'bar',
            stack: '次数',
            label: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(158, 206, 32)'
              }
            },
            data: [66, 47, 74, 57, 73, 89, 68, 111, 156, 139, 116, 151, 154]
          }, {
            name: '企业税务征收信息查询',
            type: 'bar',
            stack: '次数',
            label: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(220, 139, 103)'
              }
            },
            data: [127, 58, 145, 149, 177, 170, 178, 57, 73, 89, 68, 111]
          }, {
            name: '批量基本信息查询',
            type: 'bar',
            stack: '次数',
            label: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(134, 174, 30)'
              }
            },
            data: [37, 23, 119, 141, 127, 117, 145, 145, 149, 177, 170, 178]
          }, {
            name: '批量自然人关联信息查询',
            type: 'bar',
            stack: '次数',
            label: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(195, 226, 228)'
              }
            },
            data: [100, 24, 119, 141, 127, 117, 145, 119, 141, 127, 117, 145]
          }]
        };
        myChart.setOption(initOption);
      });
      if (initOption && typeof initOption === 'object') {
        myChart.setOption(initOption);
      }
    },
    screenAdapter() {
      this.titleFontSize = Math.round(this.$refs.refChart.offsetWidth / 30);
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 0.8),
          },
        },
        // 圆点分类标题
        legend: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 0.8),
          },
        },
        xAxis: {
          //  改变x轴字体颜色和大小
          axisLabel: {
            textStyle: {
              fontSize: Math.round(this.titleFontSize * 0.7),
            },
          },
        },
        yAxis: {
          //  改变y轴字体颜色和大小
          axisLabel: {
            textStyle: {
              fontSize: Math.round(this.titleFontSize * 0.7),
            },
          },
        },
      };
      // 图表自适应变化配置
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    // 定时器
    getDataTimer() {
      this.dataTimer = setInterval(() => {
        // 执行刷新数据的方法
        // this.getData();
      }, 5000)
    }
  }
}
</script>
